<route lang="json">
{
  "meta": {
    "title": "t('shoYiMinXi')"
  }
}
</route>
<script setup lang="ts">
import hierarchyLogs from "./components/hierarchyLogs.vue";
import financialLogs from "./components/financialLogs.vue";
import svipOutLogs from "./components/svipOutLogs.vue";
import directThrustLogs from "./components/directThrustLogs.vue";
import vccForexLogs from "./components/vccForexLogs.vue";
import { type Component } from "vue";

const { t } = useI18n();

interface SelectItem {
  icon: string;
  title: string;
  components: Component;
}

const selects = computed<SelectItem[]>(() => [
  {
    icon: "icon-jinbi",
    title: t("liCaiShouYi"),
    components: financialLogs,
  },
  {
    icon: "icon-cengji",
    title: t("cenJiShouYi"),
    components: hierarchyLogs,
  },
  {
    icon: "icon-zuanshi",
    title: t("svipChuJuShouYi"),
    components: svipOutLogs,
  },
  {
    icon: "icon-tuandui",
    title: t("zhiTuiShouYi"),
    components: directThrustLogs,
  },
  {
    icon: " icon-jinbi ",
    title: t("vccWaiHuiJiLu"),
    components: vccForexLogs,
  },
]);
const current = ref<SelectItem>(selects.value[0]);

function changeElect(select: SelectItem) {
  current.value = select;
  collapse.value = undefined;
}
const collapse = ref();
</script>

<template>
  <CpageView>
    <VanCollapse class="selectLang" v-model="collapse" accordion>
      <RcollapseItem class="PD-0 clip-path-1 B-M1-O1">
        <template #title>
          <div class="C-M1">
            {{ current.title }}
          </div>
        </template>
        <template #icon>
          <Cicon :name="current.icon" class="MR-xs C-M1" />
        </template>
        <Ccell
          :class="{ 'C-M1': select.icon === current.icon }"
          border-mode="bottom"
          v-for="select in selects"
          @click="changeElect(select)"
        >
          <template #left>
            {{ select.title }}
          </template>
          <template #right>
            <Cicon :name="select.icon" />
          </template>
        </Ccell>
      </RcollapseItem>
    </VanCollapse>
    <component :is="current?.components" />
  </CpageView>
</template>

<style lang="scss" scoped></style>
